<template>
    <div style="margin-left: 50px">
        <div style="display: flex">
            <span style="font-size: 25px">回收站</span>


            <div style="margin-left: 5px;margin-right: 5px">
                <el-input placeholder="请输入关键字，如有多条件用，隔开" v-model="state.searchInfo" style="width: 200px"></el-input>
                <el-button style="margin-left: 5px" type="success" @click="searchFileInfo">
                    <el-icon>
                        <Search/>
                    </el-icon>
                </el-button>
            </div>
        </div>
        <el-table
                style="width: 1200px"
                :data="state.fileList"
                :default-sort="[{ prop: 'fileName', order: 'fileName' },{ prop: 'registerDate', order: 'descending' }]"
                @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="30"/>
            <el-table-column prop="fileName" sortable label="文件名"/>
            <el-table-column prop="filePackage" label="文件夹"/>
            <el-table-column prop="fileCapacity" label="大小"/>
            <el-table-column prop="creationTime" label="创建时间"/>
            <el-table-column label="操作" width="300">
                <template #default="scope">
                    <!--        link控制按键-->
                    <el-dropdown>
                        <template #dropdown>
                            恢复
                        </template>
                        <el-button type="primary" size="small" @click="refreshFileInfo(scope.row)"
                                   style="margin-right: 15px">
                            <el-icon>
                                <Refresh/>
                            </el-icon>
                            <!--            收藏-->
                        </el-button>
                    </el-dropdown>
                    <el-dropdown>
                        <template #dropdown>
                            删除
                        </template>
                        <el-button type="primary" size="small" @click="deleteFileInfo(scope.row)"
                                   style="margin-right: 10px">
                            <el-icon>
                                <Delete/>
                            </el-icon>
                            <!--            删除-->
                        </el-button>
                    </el-dropdown>
                </template>
            </el-table-column>
        </el-table>
      <div style="margin-top: 10px">
        <el-pagination
            v-model:currentPage="currentPage"
            v-model:page-size="pageSize"
            :page-sizes="[10, 20, 50, 100]"
            :background="true"
            layout="total, sizes, prev, pager, next, jumper"
            :total=total
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"/>
      </div>
<!--      增加我的分享对话框-->
      <el-dialog
          v-model="dialogVisible"
          title="Tips"
          width="30%"
          :before-close="handleClose"
      >
        <span>This is a message</span>
        <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible = false">Cancel</el-button>
        <el-button type="primary" @click="dialogVisible = false">
          Confirm
        </el-button>
      </span>
        </template>
      </el-dialog>

    </div>
</template>


<script setup>
    import {getCurrentInstance, onMounted, reactive, ref, watch} from "vue";
    import {Position, Download, Star, Delete, Search, Refresh} from "@element-plus/icons-vue"
    import request from "../request"
    import ElNotification, {ElMessage} from "element-plus";

    const state = reactive({
        fileList: [],
        searchInfo: ""
    })


    // 默认初始位置
    const currentPage = ref(1)
    // 默认每页个数
    const pageSize = ref(10)
    const total = ref(10)
    onMounted(() => {
        searchFileInfo()
    })
    const handleSizeChange = (val) => {
      pageSize.value = val
      searchFileInfo()
    }
    const handleCurrentChange = (val) => {
      currentPage.value = val
      searchFileInfo()
    }
    const searchFileInfo = () => {
        request.get('file/queryRecycleFileInfo', {
            params: {
                currentPage: currentPage.value,
                pageSize: pageSize.value,
                searchInfo: state.searchInfo,
            }
        }).then(res => {
            state.fileList = res.data.data
            for (let i of state.fileList) {
                i.fileCapacity = sizeTostr(parseInt(i.fileCapacity))
            }
          total.value=res.data.total
        })

    }
    const handleSelectionChange = () => {

    }
    const sizeTostr = (size) => {

        console.info(size)
        let data = "";
        if (size < 0.1 * 1024) { //如果小于0.1KB转化成B
            data = size.toFixed(2) + "B";
        } else if (size < 0.1 * 1024 * 1024) {//如果小于0.1MB转化成KB
            data = (size / 1024).toFixed(2) + "KB";
        } else if (size < 0.1 * 1024 * 1024 * 1024) { //如果小于0.1GB转化成MB
            data = (size / (1024 * 1024)).toFixed(2) + "MB";
        } else { //其他转化成GB
            data = (size / (1024 * 1024 * 1024)).toFixed(2) + "GB";
        }
        let sizestr = data + "";
        let len = sizestr.indexOf("\\.");
        let dec = sizestr.substr(len + 1, 2);
        if (dec == "00") {
            return sizestr.substring(0, len) + sizestr.substr(len + 3, 2);
        }
        return sizestr;
    }
    const refreshFileInfo = (fileInfo) => {
        request.post('file/refreshFileInfo', fileInfo).then(res => {
            if (res.success) {
                ElMessage.success(res.msg)
                searchFileInfo()
            }
        })
    }
    const deleteFileInfo = (fileInfo) => {
        request.post('file/deleteRecycleFileInfo', fileInfo).then(res =>{
            if(res.success) {
                ElMessage.success(res.msg)
                searchFileInfo()
            }
        })
    }
</script>
